<template>
    <div>
        <el-tabs :tab-position="tabPosition" style=" ">
            <el-tab-pane label="系统消息" @click="system(1)" class="scrollable-content">
                <div v-if="sysData.length>0">
                    <el-card class="box-card" style="overflow-y: auto;">
                        <div v-for="item in sysData" :key="item.id" style="margin-top: 20px;">
                                <div style=" display: flex;align-items: center; margin-left: 20px; margin-right: 20px;">
                                    <div>
                                        <el-image  class="image"  :src="'http://localhost:8080/api/files/'+item.sendImage "></el-image>
                                    </div>
                                    <div style="padding-left: 20px;">
                                        <div>
                                            {{ item.sendName }}
                                        </div>
                                        <!-- 3点赞 -->
                                        <div v-if="item.notificationCategory === '3'">
                                            赞了你的帖子
                                        </div>
                                        <!-- 4收藏 -->
                                        <div v-if="item.notificationCategory === '4'">
                                            收藏了你的帖子
                                        </div>
                                        <!-- 虚拟人物审批 -->
                                        <div v-if="item.notificationCategory === '5'">
                                            虚拟人物需要审批
                                        </div>
                                        <!-- 帖子审批 -->
                                        <div v-if="item.notificationCategory === '6'">
                                            发布了帖子需要审批
                                        </div>
                                    </div>
                                    <div style="padding-left: 20px;">
                                        {{ item.articleTitle }}
                                    </div>
                                    <div v-if="item.notificationCategory === '6' && item.notificationStatus === '0'" style="padding-left: 200px;">
                                        <el-button type="primary" @click="approve(item.articleId)">审批</el-button>
                                    </div>
                                    <div v-if="item.notificationCategory === '6' && item.notificationStatus === '1'" style="padding-left: 200px;">
                                        <el-button type="primary" >已处理</el-button>
                                    </div>
                                    <div v-if="item.notificationCategory === '5' && item.notificationStatus === '0'" style="padding-left: 200px;">
                                        <el-button type="primary" @click="approve1(item.articleId)">审批</el-button>
                                    </div>
                                    <div v-if="item.notificationCategory === '5' && item.notificationStatus === '1'" style="padding-left: 200px;">
                                        <el-button type="primary" >已处理</el-button>
                                    </div>
                                </div>
                            
                            
                        </div>
                    </el-card>
                </div>

                <div v-else style="display: flex; justify-content: center;">
                    已经加载完喽
                </div>
            </el-tab-pane>
            <el-tab-pane label="评论你的" @click="system()">
                <div style="display: flex; justify-content: center;">
                    
                    已经加载完喽
                </div>
            </el-tab-pane>
            <el-tab-pane label="回复你的" @click="system()">
                <div style="display: flex; justify-content: center;">
                    已经加载完喽
                </div>
            </el-tab-pane>
        </el-tabs>
        <div>
            <el-dialog title="文章详细信息" :visible.sync="dialogFormVisible" width="30%">
                 <!--文章标题 -->
                 <div style="font-weight: bold;    font-size: 16px;color: #1a1a1a;padding-left: 40px; ">
                  {{ article.articleTitle }}
                </div>
                <!-- 文章内容 -->
                <div>
                  <div v-html="article.articleContent" class="w-e-text-container" style="padding-right: 20px;padding-top: 6px;padding-bottom: 6px;background-color: #f6f6f6;padding-left: 40px; "></div>
                </div>
                <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消发布</el-button>
                <el-button type="primary" @click="passApprove(article.articleId)">通过审批</el-button>
                </div>
            </el-dialog>
        </div>
        <div>
            <el-dialog title="虚拟人物详细信息" :visible.sync="dialogFormVisible1" width="30%">
                <div >
              <div style="font-size: 16px;color: #333;"> 头像：</div>
              <el-image  class="image18"  :src="'http://localhost:8080/api/files/'+virtualler.virtuallyImage " >
                <i class="el-icon-picture-outline"></i>
              </el-image>
              <div style="font-size: 16px;color: #333;"> 角色名称：<div style="font-size: 14px; margin-left: 20px;">{{virtualler.virtuallyName}}</div></div>
              <div style="font-size: 16px;color: #333;">个性签名: <div style="font-size: 14px; margin-left: 20px;">{{ virtualler.personalSignature }}</div></div>
              <div style="font-size: 16px;color: #333;">角色简介：<div style="font-size: 14px; margin-left: 20px;">{{ virtualler.virtuallyIntro }}</div></div>
            </div>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible1 = false">取消发布</el-button>
                <el-button type="primary" @click="passApprove1(virtualler.id)">通过审批</el-button>
              </div>
            </el-dialog>
        </div>
    </div>
</template>

<style>
.image{
    width: 50px;
    height: 50px;
}
.scrollable-content {
  overflow-y: auto; /* 添加垂直滚动条 */
  max-height: 300px; /* 设置内容区域的最大高度，根据需要调整 */
}


</style>
<script>

import request from "@/utils/request"
import { Message } from "element-ui";

export default {
    name: "messageVue",
    data() {
        return {
            tabPosition: 'left',
            sysData:[],
            article:{

            },
            virtualler:{

            },
            dialogFormVisible :false,
            dialogFormVisible1 :false,

        }
    },
    //进入页面时调用
    created() {
        this.load();
    },

    //各种方法
    methods: {
        load() {
            this.system(1);
        },
        system(ref){
            request.get("/notification/findByType/"+ref).then(res=>{

                if(res.code === 1){
                    this.sysData=res.data;
                }else{
                    message.error(res.msg)
                }
            })
        },
        approve(str){
            this.dialogFormVisible =true
            request.get("/articleMain/findById/"+str).then(res=>{
                if(res.code === 1){
                this.article = res.data;
               
                }else{
                this.$message.error(res.msg)
                }
            })
        },
        passApprove(aId){
            this.dialogFormVisible = false;
            request.post("/notification/approve/"+aId).then(res=>{
                if(res.code === 1){
                this.$message.success('通过审批')
                this.system(1);
                }else{
                this.$message.error(res.msg)
                }
            })
        },
        approve1(Id){
            this.dialogFormVisible1 =true
            request.get("/virtualCharacter/findById/"+Id).then(res=>{
                if(res.code === 1){
                this.virtualler = res.data;
                
                }else{
                this.$message.error(res.msg)
                }
            })
        },
        passApprove1(aId){
            this.dialogFormVisible1 = false;
            request.post("/notification/approve1/"+aId).then(res=>{
                if(res.code === 1){
                this.$message.success('通过审批')
                this.system(1);
                }else{
                this.$message.error(res.msg)
                }
            })
        },
    }
}
</script>  